<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-form-item>
                        <el-select v-model="form.factory_name" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 100%"
                                   :remote-method="searchFactoryBtn" :loading="searchLoading" clearable :disabled="user.source_from == 'gc'">
                            <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.factory_name" :key="index" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.processing_code" placeholder="加工单号" @keyup.enter.native="searchBtn" size="small"
                                  style="width: 150px" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.sku_code" placeholder="SKU" @keyup.enter.native="searchBtn" size="small"
                                  style="width: 130px" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="form.m_status" size="small" placeholder="确认状态" style="width: 100px" clearable>
                            <el-option :value=0 label="未确认"></el-option>
                            <el-option :value=1 label="已确认"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="form.push_jw_status" size="small" placeholder="推送状态" style="width: 100px" clearable>
                            <el-option :value=0 label="未推送"></el-option>
                            <el-option :value=1 label="已推送"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small"
                               :loading="btnLoading">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="small" @selection-change="selectChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="成品加工单号" align="center" prop="processing_code" width="120"></el-table-column>
                <el-table-column label="工厂" align="center" prop="factory_name" width="130" show-overflow-tooltip></el-table-column>
                <el-table-column label="SKU" align="center" prop="sku_code" width="130">
                    <template slot-scope="{ row }">
                        <el-button type="text" size="mini" @click="linkTo(row.sku_code, 'produce_tag_manage')">{{ row.sku_code }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="品名" align="center" prop="product_name" width="130" show-overflow-tooltip></el-table-column>
                <el-table-column label="款名" align="center" prop="type_name" show-overflow-tooltip></el-table-column>
                <el-table-column label="执行标准" align="center" prop="executive_standard"></el-table-column>
                <el-table-column label="安全类别" align="center" prop="safety_category"></el-table-column>
                <el-table-column label="理单员" align="center" prop="order_processor" width="80"></el-table-column>
                <el-table-column label="数量" align="center" prop="num" width="80"></el-table-column>
                <el-table-column label="确认状态" align="center" prop="m_status" width="80">
                    <template slot-scope="{ row }">
                        <el-tag v-if="row.m_status == 0" size="mini" type="info">未确认</el-tag>
                        <el-tag v-else type="success" size="mini">已确认</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="推送状态" align="center" prop="m_status" width="80">
                    <template slot-scope="{ row }">
                        <el-tag v-if="row.push_jw_status == 0" size="mini" type="info">未推送</el-tag>
                        <el-tag v-else type="success" size="mini">已推送</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" class="el-icon-check" v-if="scope.row.m_status == 0" @click="checkBtn(scope.row, 1)"
                            :disabled="!(scope.row.m_status==0&&nodeActions.includes('edit'))">
                            确认
                        </el-button>
                        <span v-else>
                            <!--el-button type="text" size="small" class="el-icon-position" v-if="scope.row.push_jw_status == 0" @click="pushBtn(scope.row.id, scope.row.t_id)">&nbsp;推送</el-button-->
                            <el-button type="text" size="small" class="el-icon-view" style="color: #67c23a" @click="viewBtn(scope.row)">
                                预览
                            </el-button>
                            <el-button type="text" size="small" class="el-icon-close" :style="{color: nodeActions.includes('edit')?'red':''}" @click="checkBtn(scope.row, 0)"
                                :disabled="!(nodeActions.includes('edit'))">
                                取消
                            </el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;">
                <el-button type="primary" size="mini" :disabled="!(selectedData.length>0&&nodeActions.includes('edit'))" @click="checkBatchBtn(1)">批量确认</el-button>
                <el-button type="danger" size="mini" :disabled="!(selectedData.length>0&&nodeActions.includes('edit'))" @click="checkBatchBtn(0)">批量取消</el-button>
                <Page style="float: right;" :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--吊牌预览-->
        <el-dialog  title="吊牌预览" :visible.sync="viewVisible" width="300px" top="20px" :close-on-click-modal="false">
            <div class="tag-box" id="printTag">
                <div style="width: 4mm;height: 15mm;"></div>
                <div style="font-size: 4.7mm;font-weight: 550;text-align: center;">合格证</div>
                <div class="fontSize" style="margin-top: 5mm">品牌：{{ viewForm.brand_name }}</div>
                <div class="fontSize">品名：{{ viewForm.product_name }}</div>
                <div class="fontSize">款号：{{ viewForm.type_no }}</div>
                <div class="fontSize" style="font-size: 3.7mm;white-space: pre-line;zoom: .8;">
                    <span>{{ viewForm.fabric }}</span>
                </div>
                <div class="fontSize">执行标准：{{ viewForm.executive_standard }}</div>
                <div class="fontSize" style="box-sizing: border-box;word-break: break-all;margin: 0;padding: 0;">
                    <div style="display: flex;align-items: center;margin-top: 2mm;">
                        <div>安全类别：</div>
                        <div>{{ viewForm.safety_category }}</div>
                    </div>
                    <div style="display: flex;align-items: center;margin-top: 2mm;">
                        <div>等级：</div>
                        <div>合格品</div>
                    </div>
                    <div style="display: flex;align-items: center;margin-top: 2mm;">
                        <div>检验员：</div>
                        <div>{{ viewForm.tag_number }}</div>
                    </div>
                </div>
                <div style="height: 14mm;"></div>
                <div class="fontSize">公司：{{ viewForm.company_head }}</div>
<!--                <div class="fontSize" style="margin-top: 0">电话：{{ viewForm.company_tel }}</div>-->
                <div class="fontSize" style="margin-top: 0">地址：{{ viewForm.address }}</div>
                <div style="font-size:4.8mm;font-weight: 600;margin-top: 1.2mm;margin-left: 2mm;" v-if="viewForm.code_list && viewForm.code_list.size_code">
                    {{ viewForm.code_list.size_code.title }}
                    <span style="margin-left:5px;font-weight:400;font-size: 3mm;zoom: 0.7;">{{ viewForm.specifications_base_cdoe }}</span>
                </div>
                <div class="fontSize" style="margin-top: 0;height: 5mm;margin-left: 2mm;">
                    <span v-if="viewForm.code_list && viewForm.code_list.height_code.title">
                        {{ viewForm.code_list.height_code.title }}/{{viewForm.code_list.waist_code.title }}
                    </span>
                    <!--童装展示吊牌价-->
                    <span v-if="viewForm.is_tz && viewForm.show_tag_price" style="float: right">吊牌价：¥ {{viewForm.tag_price}}</span>
                </div>
                <img id="barcode" style="width: 60mm; height: 16mm" />
                <div style="background: #fff;text-align: center;font-size: 4mm;margin-top: -2.2mm;zoom: .73">
                    <span>{{ viewForm.sku_code }}</span>
                </div>
                <div style="margin-top: 1.5mm;display: flex;box-sizing: border-box;word-break: break-all;margin: 0;padding: 0;" v-if="['十三余', '锦瑟'].includes(viewForm.brand_name)">
                    <img v-if="viewForm.brand_name=='十三余'" :src="wxQrcodPng" alt="" style="width: 18mm;height: 18mm">
                    <img v-if="viewForm.brand_name=='锦瑟'" :src="wxQrcodePng_JS" alt="" style="width: 18mm;height: 18mm">
                    <div style="margin-left: 1mm;">
                        <div style="display: flex;align-items: center;font-size: 4mm;zoom: .84;">
                            <img :src="wxPng" alt="" style="width: 7mm;height: 7mm;margin-right: 1mm;"/>
                            <div>微信扫一扫</div>
                        </div>
                        <div style="margin-top: 1mm;font-size: 4mm;zoom: .56;">微信扫描防伪小程序，鉴定产品真伪。</div>
                        <div style="margin-top: 1mm;font-size: 4mm;zoom: .56;">认准正品，谨防假冒</div>
                    </div>
                </div>
            </div>
            <div style="margin-top: 10px;text-align: center">
                <el-button type="primary" v-print="'#printTag'" size="small">打印</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {tagCheckList, tagCheckPreview, tagPush, tagStatus} from "@/api/produce/tag";
import {factoryList} from "@/api/produce/factory";
import wxPng from "@/assets/images/wx.png";
import wxQrcodPng from "@/assets/images/wxqrcod.png";
import wxQrcodePng_JS from "@/assets/images/wxqrcode_js.png";
import JsBarcode from "jsbarcode";

export default {
    name: "produce_tag_check",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {processing_code: "",  sku_code: "", m_status: "", factory_name: "", push_jw_status: ""},
            selectedData: [],
            viewForm: {},
            viewVisible: false,
            wxPng,
            wxQrcodPng,
            wxQrcodePng_JS,

            factoryList: [],
            searchLoading: false,
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
        if(this.user.source_from == 'gc'){//用户来源：工厂
            this.form.factory_name = this.user.factory_name;
        }
    },
    watch:{
        // 监听路由参数的变化
        '$route.params.sku_code': {
            immediate: true,
            handler(val) {
                if(!!val && val != this.form.sku_code){
                    this.$set(this.form, 'sku_code', val);
                    this.searchBtn();
                }
            }
        },
    },
    methods: {
        //搜索加工厂
        searchFactoryBtn(val){
            if(val == ""){
                return;
            }
            this.getFactoryData(val);
        },
        getFactoryData(name){
            factoryList({page: 1, limit: 200, factory_name: name, tab: "1,2", status: 0}).then((res) =>{
                this.factoryList = res.data.data;
            })
        },
        //跳转
        linkTo(val, page){
            this.$router.push({name: page, params: {sku_code: val}});
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
                factory_name: this.form.factory_name,
                sku_code: this.form.sku_code,
                m_status: this.form.m_status,
                processing_code: this.form.processing_code,
                push_jw_status: this.form.push_jw_status
            };
            this.loading = true;
            tagCheckList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        selectChange(list){
            this.selectedData = list;
        },
        //批量确认
        checkBatchBtn(status){
            let msg = status == 1 ? "是否批量确认, 吊牌?" : "是否批量取消, 吊牌?"
            this.$confirm(msg, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let ids = [];
                this.selectedData.forEach(item =>{
                    ids.push({t_id:item.t_id, p_id:item.id});
                });
                this.loading = true;
                tagStatus({ids: JSON.stringify(ids), status: status}).then((res) => {
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success("操作成功");
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.loading = false;
                });
            }).catch(() => {});
        },
        //确认
        checkBtn(row, status){
            let msg = status ? "确认" : "取消确认";
            this.$confirm(`是否${msg}, 吊牌?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                tagStatus({ids: JSON.stringify([{t_id: row.t_id, p_id:row.id}]), status: status}).then((res) => {
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success("操作成功");
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.loading = false;
                });
            }).catch(() => {});
        },
        //推送
        pushBtn(p_id, t_id){
            let list = [{p_id: p_id, t_id: t_id}];
            this.$confirm(`是否推送, 吊牌?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                tagPush({data: JSON.stringify(list)}).then((res) => {
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success("操作成功");
                        this.getData();
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.loading = false;
                });
            }).catch(() => {});
        },
        //预览
        viewBtn(row){
            this.loading = true;
            tagCheckPreview({p_id: row.id, t_id: row.t_id}).then((res) =>{
                this.loading = false;
                this.viewForm = res.data;
                this.viewVisible = true;
                this.$nextTick(() => {
                    // 待生成条码的内容
                    JsBarcode("#barcode", this.viewForm.sku_code, {
                        displayValue: false,
                        //format: "EAN13"
                    });
                });
            }).catch(()=>{
                this.loading = false;
            })
        }
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>
@page {
    size: auto;
    margin: 0mm;
}

.tag-box{
    background: #fff;
    width: 68mm;
    color: #000;
    padding-left: 6mm;
    padding-right: 4.8mm;
    box-sizing: border-box;
    border-radius: 6mm;
}
.fontSize{
    font-size: 4mm;
    margin-top: 2mm;
    zoom: .83;
}
</style>
